<template>
   <div class="com-contain">
     <div class="com-chart" ref="sel"></div>
  </div>
</template>

<script>
export default {
   data () {
       return {
           chartinit:null,
           pieData:[],
       }
   },

   mounted(){
       this.initEcharts()
       this.updateChart()
   },
   methods:{

       initEcharts(){
          this.chartinit = this.$echarts.init(this.$refs.sel)
       },
       //获取数据
       getList(){},

       //更新
       updateChart(){
           this.pieData = [
               {name:'淘宝',value:22361},
               {name:'京东',value:11231},
               {name:'拼多多',value:30220},
               {name:'一号店',value:6900},
               {name:'唯品会',value:9001}
           ]
           const options = {
               series:[
                   {
                     type:'pie',
                     data:this.pieData,
                     label:{  //饼图文字显示
                         show:true,
                         formatter:function(arg){
                             console.log(arg);

                             return arg.name + '平台' + arg.value + '元\n'+ arg.percent + '%'
                         }
                     },
                    // radius:'20%' //饼图的半径
                   // radius:['50%','75%']  // 第0个参数是内圆的半径,第1个参数是外圆的半径
                   roseType:'radius'  //南丁格尔图
                   }
               ]
           }
           this.chartinit.setOption(options)
       }
   }
}
</script>

<style>

</style>